<template>
    <div class="page-demo-table-base">
        <div class="main-page-content">
            <ContentHeader title="这里是控制流结构度量" explain="上传您的控制流图，您将得到控制流图的分析结果。">

            </ContentHeader>

            <div class="page-content" style="margin-top: 20px;">
                <span style="font-size: large;">上传您的控制流图</span>
                <a-divider />
                <a-upload name="file" :multiple="false" :showUploadList="false" :customRequest="getCFResult">
                    <a-button> <a-icon type="upload" /> 选择要上传的控制流图（.oom文件）</a-button>
                </a-upload>
                
            </div>
            <div class="page-content" v-if="!(CFResult == undefined || CFResult == null || CFResult.length <= 0)">
                <div style="margin-top: 25px;position: relative;">
                    <span style="font-size: large;">控制流结构度量结果</span>
                    <a-divider />
                    <a-card class="form-card" :loading="false" :bordered="false">
                        <a-table :columns="columns" :dataSource="CFResult" :pagination="false" :loading="false">
                        </a-table>
                    </a-card>
                </div>
            </div>
            <ContentFooter v-if="!(CFResult == undefined || CFResult == null || CFResult.length <= 0)" explain="控制流结构度量通过分析控制流图来对软件项目的复杂度进行度量。">
                <div class="helpnote">
                    <div>
                        1. 三种圈复杂度的计算方法（McCabe’s圈复杂度度量：图G有n个顶点，e条边，连通分量是P，）：<br/>
                        （1） 圈复杂度=强连通图中连成圈的最大个数（从结束指向开始节点连接一条线，再来数圈数）；<br/>
                        （2） 控制流图中的节点和边的数量来计算：V(G)=边e-节点n+2；<br/>
                        （3） 控制流图中判定节点的数量来计算V(G) = P + 1。<br/>

                    </div>
                    <div>
                        2. 如果发现一个模块圈复杂度偏高，就要考虑对这个模块进行拆分优化。考虑是否可以将这个模块进行分解，然后通过函数调用的方法来完成整体功能。
                        <br/>&nbsp;&nbsp;&nbsp;&nbsp;这样可以：减少程序错误；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;提高软件的整体质量；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;提高程序的可理解性、可维护性；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;减少程序的测试与维护工作量。<br/>
                    </div>
                </div>
            </ContentFooter>
            <ContentFooter v-else activeKey="1" explain="控制流结构度量通过分析控制流图来对软件项目的复杂度进行度量。">
                <div class="helpnote">
                    <div>
                        1. 三种圈复杂度的计算方法（McCabe’s圈复杂度度量：图G有n个顶点，e条边，连通分量是P，）：<br/>
                        （1） 圈复杂度=强连通图中连成圈的最大个数（从结束指向开始节点连接一条线，再来数圈数）；<br/>
                        （2） 控制流图中的节点和边的数量来计算：V(G)=边e-节点n+2；<br/>
                        （3） 控制流图中判定节点的数量来计算V(G) = P + 1。<br/>

                    </div>
                    <div>
                        2. 如果发现一个模块圈复杂度偏高，就要考虑对这个模块进行拆分优化。考虑是否可以将这个模块进行分解，然后通过函数调用的方法来完成整体功能。
                        <br/>&nbsp;&nbsp;&nbsp;&nbsp;这样可以：减少程序错误；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;提高软件的整体质量；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;提高程序的可理解性、可维护性；<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;减少程序的测试与维护工作量。<br/>
                    </div>
                </div>
            </ContentFooter>
        </div>
    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer";
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
let j = 0;
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        return {
            CFResult: [],
            "columns": [
                {
                    title: '判定节点数',
                    dataIndex: 'decisions',
                    key: 'decisions',
                    align: 'center',
                    width: '20%',
                    scopedSlots: { customRender: 'decisions' }
                },
                {
                    title: '普通节点数',
                    dataIndex: 'activity',
                    key: 'activity',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'activity' }
                },
                {
                    title: '总节点数',
                    dataIndex: 'totalNode',
                    key: 'totalNode',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'totalNode' }
                },
                {
                    title: '控制流',
                    dataIndex: 'flows',
                    key: 'flows',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'flows' }
                },
                {
                    title: '圈复杂度',
                    dataIndex: 'circle',
                    key: 'circle',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'circle' }
                }
            ],
        }
    },
    created() {
        this.loading_page = true;
        setTimeout(() => {
            this.loading_page = false;
        }, 1500);
    },
    methods: {
        getCFResult(data) {
            console.log("上传代码文件，发送HTTP请求……", data.file)
            let formdata = new FormData()
            formdata.append("file", data.file)
            this.$http.post('http://localhost:8085/cfmetric/mccabe', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }).then(res => {
                console.log("获取LOC度量结果，返回结果为：", res.data)
                this.CFResult.push({
                    key: (j).toString(),
                    decisions: res.data.data.decisions,
                    activity: res.data.data.activity,
                    totalNode: res.data.data.totalNode,
                    flows: res.data.data.flows,
                    circle: res.data.data.circle
                })
                console.log(this.CFResult)
                j = j + 1
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>


<style lang="less" scoped>
@import "./base.less";
</style>